<template>
  <div class="condition">
    <splitpanes class="default-theme">
      <pane>
        <div class="condition-item">
          <div :class="must === '' ? 'disable' : ''" class="key">MUST</div>
          <t-input type="text" v-model="must" class="input" @keydown.enter="run()"
                   placeholder="field1='str',field2=num" allow-clear style="padding: 0"
                   @clear="clear()"/>
        </div>
      </pane>
      <pane>
        <div class="condition-item">
          <div :class="should === '' ? 'disable' : ''" class="key">SHOULD</div>
          <t-input type="text" v-model="should" class="input" @keydown.enter="run()"
                   placeholder="field1='str',field2=num" allow-clear style="padding: 0"
                   @clear="clear()"/>
        </div>
      </pane>
      <pane>
        <div class="condition-item">
          <div :class="mustNot === '' ? 'disable' : ''" class="key">MUST_NOT</div>
          <t-input type="text" v-model="mustNot" class="input" @keydown.enter="run()"
                   placeholder="field1='str',field2=num" allow-clear style="padding: 0"
                   @clear="clear()"/>
        </div>
      </pane>
      <pane>
        <div class="condition-item">
          <div :class="order === '' ? 'disable' : ''" class="key">ORDER</div>
          <t-input type="text" v-model="order" class="input" @keydown.enter="run()"
                   placeholder="field1 asc,field2 desc" allow-clear style="padding: 0"
                   @clear="clear()"/>
        </div>
      </pane>
    </splitpanes>
  </div>
</template>
<script lang="ts" setup>
import {Pane, Splitpanes} from 'splitpanes';
import {UseDataBrowserInstance} from "@/hooks";

const props = defineProps({
  tab: {
    type: Object as PropType<UseDataBrowserInstance>,
    required: true
  }
});

const {run, clear, must, mustNot, should, order} = (props.tab as UseDataBrowserInstance);

</script>
<style scoped lang="less">
.condition-item {
  display: flex;
  background-color: var(--td-bg-color-container);

  .key {
    line-height: 35px;
    color: var(--td-text-color-secondary);
    font-weight: bold;
    user-select: none;

    &.disable {
      color: #787878;
    }
  }

  .input {
    border: 0;
    width: 100%;
    outline: 0;
    padding: 8px 0;
    margin: 0 5px 1px;
    line-height: 1em;
  }

  .clear {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    display: none;
  }

  &:hover {
    .clear {
      display: block;
    }
  }
}
</style>
